<script setup lang="ts">
import { ref } from "vue";
import Qs from "qs";
console.log('load home page ...')
const userInfo = ref({
  name: "liuweihua",
  age: "29",
});

const submit = () => {
  fetch("/api/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: Qs.stringify(userInfo.value),
  })
    .then((value) => value.json())
    .then((res) => {
      console.log(res);
    });
};
</script>
<template>
  <div class="home">
    <div class="form">
      <div>name: <input type="text" v-model="userInfo.name" /></div>
      <div>
        &nbsp;&nbsp;age: <input type="text" v-model="userInfo.age" /><br />
      </div>
      <div>
        <!-- <input type="submit" value="提交" @click="submit" class="submit" /> -->
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.form {
  width: 400px;
  height: 200px;
  margin: 50px auto;
  border: 1px solid #000;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  div {
    input {
      width: 300px;
      height: 30px;
    }
  }
}
</style>
